<template>
  <div class="tab">
    <div class="top">
      <div class="box">
        <el-dropdown class="login-user">
          <div  >
            <!--      {{questionData.userImg}}-->
            <!--          <el-avatar-->
            <!--              :src="questionData.userImageUrl"-->
            <!--          />-->
            <el-avatar
                :src="userInfo.imageUrl" size="small"
            />
            <el-text :class="['mx-1', 'user-nickname']" size="default">{{ userInfo.nickname }}</el-text>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="toHome" divided>首页</el-dropdown-item>
              <el-dropdown-item @click="toUserSetting" divided>我的信息</el-dropdown-item>
              <el-dropdown-item @click="toAddQuestion" divided>我要提问</el-dropdown-item>
              <el-dropdown-item @click="toAddEssay" divided>发表文章</el-dropdown-item>
              <el-dropdown-item @click="showMyPosted = true" divided>我发布的</el-dropdown-item>
              <el-dropdown-item @click="showMyCollected = true" divided>我收藏的</el-dropdown-item>
<!--              <el-dropdown-item divided>Action 2</el-dropdown-item>-->
<!--              <el-dropdown-item divided>Action 3</el-dropdown-item>-->
              <el-dropdown-item v-if="userIsAdmin" @click="toAdmin" divided>后台管理</el-dropdown-item>
              <el-dropdown-item @click="loginOut" divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <el-dialog v-model="showMyPosted" title="我发布的">
          <div class="entityButton">
            <el-button type="primary" size="large" @click="showMyPostedQuestion = true">问题</el-button>
            <el-button type="primary" size="large" @click="showMyPostedAnswer = true">回答</el-button>
            <el-button type="primary" size="large" @click="showMyPostedEssay = true">文章</el-button>
          </div>
        </el-dialog>

        <el-dialog v-model="showMyPostedQuestion" title="我发布的问题">
          <MyPostedQuestionBox></MyPostedQuestionBox>
        </el-dialog>

        <el-dialog v-model="showMyPostedAnswer" title="我发布的回答">
          <MyPostedAnswerBox></MyPostedAnswerBox>
        </el-dialog>

        <el-dialog v-model="showMyPostedEssay" title="我发布的文章">
          <MyPostedEssayBox></MyPostedEssayBox>
        </el-dialog>

        <el-dialog v-model="showMyCollected" title="我收藏的">
          <div class="entityButton">
            <el-button type="primary" size="large" @click="showMyCollectedQuestion = true">问题</el-button>
            <el-button type="primary" size="large" @click="showMyCollectedAnswer = true">回答</el-button>
            <el-button type="primary" size="large" @click="showMyCollectedEssay = true">文章</el-button>
          </div>
        </el-dialog>

        <el-dialog v-model="showMyCollectedQuestion" title="我收藏的问题">
          <MyCollectedQuestionBox></MyCollectedQuestionBox>
        </el-dialog>

        <el-dialog v-model="showMyCollectedAnswer" title="我收藏的回答">
          <MyCollectedAnswerBox></MyCollectedAnswerBox>
        </el-dialog>

        <el-dialog v-model="showMyCollectedEssay" title="我收藏的文章">
          <MyCollectedEssayBox></MyCollectedEssayBox>
        </el-dialog>

        <div class="item1">
          <div :class="whichCss(nameMapping.QUESTION)" @click="changeQueryType(nameMapping.QUESTION)">问题</div>
          <div :class="whichCss(nameMapping.ANSWER)" @click="changeQueryType(nameMapping.ANSWER)">回答</div>
          <div :class="whichCss(nameMapping.ESSAY)" @click="changeQueryType(nameMapping.ESSAY)">文章</div>
        </div>

        <div class="itemInput" v-if="showSearch">
          <el-input
              v-model="query"
              size="small"
              placeholder="请输入内容"
              :prefix-icon="Search"
          >
            <template #prefix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-input>
        </div>
        <div class="itemBtn" v-if="showSearch">
          <el-button type="primary" size="small" @click="changeQuery">
            搜索
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent} from 'vue'
import {ElMessage} from "element-plus";
// import { Search } from '@element-plus/icons-vue'
import * as nameMapping from "@/settings/nameMapping"
import {getUserInfo} from "@/manager/UserManager"
import axios from "@/settings/axios";
import router from "@/router";
import {ADMIN_ROLE_NAME_EN} from "@/settings/sysMapping";
import MyPostedQuestionBox from "@/components/MyPostedQuestionBox";
import MyPostedEssayBox from "@/components/MyPostedEssayBox";
import MyPostedAnswerBox from "@/components/MyPostedAnswerBox";
import MyCollectedQuestionBox from "@/components/MyCollectedQuestionBox";
import MyCollectedEssayBox from "@/components/MyCollectedEssayBox";
import MyCollectedAnswerBox from "@/components/MyCollectedAnswerBox";

export default defineComponent({
  name: "Top",
  components: {
    MyPostedQuestionBox,
    MyPostedEssayBox,
    MyPostedAnswerBox,
    MyCollectedQuestionBox,
    MyCollectedEssayBox,
    MyCollectedAnswerBox,
  },
  data() {
    return {
      query: "",
      nameMapping: nameMapping,
      userInfo: {},
      userIsAdmin: false,
      showMyPosted: false,
      showMyPostedQuestion: false,
      showMyPostedAnswer: false,
      showMyPostedEssay: false,
      showMyCollected: false,
      showMyCollectedQuestion: false,
      showMyCollectedAnswer: false,
      showMyCollectedEssay: false,
    }
  },
  watch: {

  },
  methods: {
    changeQuery() {
      this.$store.commit('updateQueryText', this.query);
      ElMessage({
        showClose: true,
        message: nameMapping.LOADING,
        type: 'message',
        center: true,
        duration: 1000,
      });
    },
    whichCss(itemType) {
      let css = "tabs";
      if (this.queryType === itemType) {
        css = "tabs-now";
      }
      else {
        css = "tabs";
      }
      return css;
    },
    toUserSetting() {
      router.push("/user/user_info")
    },
    toAddQuestion() {
      router.push("/question/add")
    },
    toAddEssay() {
      router.push("/essay/add")
    },
    toHome() {
      let nowRouter = window.location.pathname;
      /* 如果路由不是首页，就跳转到首页 */
      if (nowRouter !== "/shane/home") {
        router.push("/shane/home");
      }
    },
    changeQueryType(queryType) {
      this.toHome();
      this.$store.commit('updateQueryType', queryType);
    },
    async loginOut() {
      localStorage.setItem("userInfo", null);
      let loginOutData = await axios.post("/SysUser/login_out");
      // let success = loginOutData.data;
      console.log(loginOutData);
      ElMessage({
        showClose: true,
        message: loginOutData,
        type: 'message',
        center: true,
        duration: 1000,
      });

      router.push("/user/login");

    },
    toAdmin() {
      router.push("/admin/question")
    },
  },
  async mounted() {
    let userInfo = await getUserInfo();
    console.log(userInfo);
    this.userInfo = userInfo;
    this.userIsAdmin = userInfo.roleNameEnList.includes(ADMIN_ROLE_NAME_EN);
  },
  computed: {
    queryType() {
      return this.$store.state.queryType;
    },
    showSearch() {
      return window.location.pathname === "/shane/home";
    },

  }
})
</script>

<style scoped>
.top{
  border-bottom: #e3e3e3 2px solid;
  padding-bottom: 10px;
  padding-top: 10px;
  background-color: #ffffff;

}
.box{
  display: flex;
  background-color: #ffffff;
}
.item1{
  flex: 2;
  display: flex;
  margin-left: 20%;
}
.tabs{
  margin-left: 30px;
}
.tabs:hover{
  color: #54b4f8;
  cursor: pointer;
}
.tabs-now {
  /*color: #54b4f8;*/
  margin-left: 30px;
  cursor: pointer;
  border-bottom: 2px solid #54b4f8;
  font-weight: bold;
}
.itemInput{
  flex: 1;
}
.itemBtn{
  flex:0.2;
}
.login-user {
  margin-left: 4%;
}
.login-user:hover {
  color: #54b4f8;
  cursor: pointer;
  /*border-bottom: 2px solid #54b4f8;*/
}
.entityButton {
  display: flex;
  justify-content: center; /* 水平居中 */
}

/*.user-nickname{*/
/*  margin-bottom: 50%;*/
/*}*/
</style>
